﻿$(document).ready(function () {

    var get_element = function (value, options) {
        var element = $($("<input type='text' class='FormElement ui-widget-content ui-corner-all' />")[0]);
        element.autocomplete({ source: '/Feature/SearchFeatures', max: 25, highlight: true, multiple: true, mustMatch: true, minChars: 3, autoFill: false, multipleSeparator: ', ',
            focus: function () {
                return false;
            },
            select: function (event, ui) {
                var terms = jqgridHelpers.split(this.value);
                terms.pop();
                terms.push(ui.item.value);
                terms.push("");
                this.value = terms.join(", ");
                return false;
            }
        });
        return element;
    };

    var get_value = function (element, operation, value) {
        if (operation === 'get') {
            return $(element).val();
        } if (operation === 'set') {
            $(element).val(value);
        }
    };

    $("#list").jqGrid({
        height: 300,
        width: 1000,
        url: '/Product/GetProductsData/',
        datatype: 'json',
        mtype: 'POST',
        colNames: ['Id', 'Name', 'Features'],
        colModel: [
          { name: 'Id', index: 'Id', width: 275, sortable: false },
          { name: 'Name', index: 'Name', width: 300, editable: true, sortable: false, editrules: { required: true} },
          { name: 'Features', width: 425, editable: true, sortable: false, edittype: 'custom', editrules: { required: true }, editoptions: { custom_element: get_element, custom_value: get_value} }
          ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 50],
        sortname: 'name',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/Content/images',
        caption: 'Features'
    }).navGrid('#pager',
               { edit: false, add: true, del: false, search: false }, {}, { addCaption: 'Add a product', url: '/Product/New/', closeAfterAdd: true, reloadAfterSubmit: true, afterSubmit: jqgridHelpers.after_submit });
}); 